<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盒子模型</title>
</head>
<style>
    .hezi div a{
        display:block;width:100%;height:100%;
    }
    .scene{
        width:200px;
        height:200px;
        position: fixed;
        left: 0;right:0;top:0;bottom: 0;
        margin: auto;border-radius: 0;
        perspective: 2000px;
    }
    .hezi{
        width:100%;border-radius: 50%;
        height:100%;
        position: relative;
        /*transition: transform 2s ease;*/
        transform-style:preserve-3d;
        transform-origin:center center 100px;
    }
    .hezi div{
        width:100%;border-radius: 50%;
        height:100%;
        position: absolute;
        text-align: center;
        line-height: 200px;
        font-size: 30px;
    }
    .hezi div:nth-child(1){
        background:red;
        transform: rotateX(90deg);
        transform-origin:top;
    }
    .hezi div:nth-child(2){
        background:blue;
        transform: rotateY(-90deg);
        transform-origin:left;
    }
    .hezi div:nth-child(3){
        background:green;
    }
    .hezi div:nth-child(4){
        background:yellow;
        transform: rotateY(90deg);
        transform-origin:right;
    }
    .hezi div:nth-child(5){
        background:pink;
        transform: rotateX(-90deg);
        transform-origin:bottom;
    }
    .hezi div:nth-child(6){
        background:gray;
        transform:translateZ(200px);
    }
    /*.scene:hover .hezi{*/
        /*transform:rotateX(360deg);*/

    /*}*/

</style>
<body style="background: #000;">
<div class="scene" onclick="alert('1')">
    <div class="hezi">
        <div><a href="http://www.baidu.com/">1</a></div>
        <div><a href="">2</a></div>
        <div><a href="">3</a></div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
    </div>
</div>
</body>
</html>
<script>
    window.onload= function(){
        var box=document.getElementsByClassName("hezi")[0];
        var clientW=document.documentElement.clientWidth;
        var clientH=document.documentElement.clientHeight;
        document.onmousedown=function(e){
            var startx= e.clientX;
            var starty= e.clientY;
            document.onmousemove=function(e){
                var movex= e.clientX;
                var movey= e.clientY;

                var endx= movex-clientW/2;
                var endy=movey-clientH/2;

                var mo=Math.sqrt(endx*endx+endy*endy);
                var x=endx/mo;
                var y=endy/mo;

                var a=(Math.atan2(x,y)*180/Math.PI);
                x=Math.abs(x);
                y=Math.abs(y);

                var angle=Math.abs(movex-startx)>Math.abs(movey-starty)?Math.abs(movex-startx):Math.abs(movey-starty);
                if(a>=0&&a<90){
                    y=-y;
                    angle=-angle;
                }
                if(a<0&&a>=-90){
                    y=-y;
                    x=-x;
                }
                if(a>=-180&&a<-90){
                    x=-x;
                    angle=-angle;
                }
                box.style.transform="rotate3d("+x+","+y+","+0+","+angle+"deg)";
                e.preventDefault();
            }

            document.onmouseup=function(){
                document.onmousemove=null;
                document.onmouseoup=null;
            }
        }
    }
</script>